import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, DatePicker, Row, Col, Select } from 'antd';
import { useRequest } from '@umijs/hooks';
import React, { useEffect, useState } from 'react';
import styles from './style.less'
import moment from 'moment';
import { _idType } from './_data'

const ClaimForm = props => {
  const { claimVisible, form, onCancel, onSubmit: handleClaim } = props;


  // 表单格式
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  // 航班日期禁用
  const disabledDate = (current) => {
    return current && current > moment().endOf('day');
  }

  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleClaim(fieldsValue)
    });
  };

  return (
    <>
      <Modal
        className={styles.claimForm}
        title={[
          <div key="title">认领</div>
        ]}
        width='900px'
        visible={claimVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Row>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="领取状态"
            >
              {form.getFieldDecorator('claimState', {
                rules: [
                  {
                    required: true,
                    message: '请选择领取状态'
                  }
                ],
                initialValue: 1
              })(<Select>
                <Select.Option value={1}>旅客已领取</Select.Option>
              </Select>)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="领取人"
            >
              {form.getFieldDecorator('claimPeople', {
                rules: [
                  {
                    required: true,
                    message: '请输入领取人'
                  }
                ]
              })(<Input placeholder='请输入' />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="联系方式"
            >
              {form.getFieldDecorator('contact', {
                rules: [
                  {
                    required: true,
                    message: '请输入联系方式'
                  }
                ]
              })(<Input placeholder='请输入' maxLength={11} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="证件类型"
            >
              {form.getFieldDecorator('idType')(
                <Select>
                  {
                    _idType.map(item => (
                      <Select.Option value={item.id}>{item.name}</Select.Option>
                    ))
                  }
                </Select>)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="证件号"
            >
              {form.getFieldDecorator('idNumber')(<Input placeholder='请输入' />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="保管费"
            >
              {form.getFieldDecorator('storageFee')(<Input placeholder='请输入' />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="交付人"
            >
              {form.getFieldDecorator('consignor', {
                rules: [
                  {
                    required: true,
                    message: '请输入交付人'
                  }
                ]
              })(<Input placeholder='请输入' />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="交付地点"
            >
              {form.getFieldDecorator('deliveryLocation', {
                rules: [
                  {
                    required: true,
                    message: '请输入交付地点'
                  }
                ]
              })(<Input placeholder='请输入' />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="交付日期"
              {...layout}
            >
              {form.getFieldDecorator('deliveryTime', {
                rules: [
                  {
                    required: true,
                    message: '请选择交付日期'
                  },
                ],
                initialValue: moment()
              })(<DatePicker disabledDate={disabledDate} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...layout}
              label="出库事由"
            >
              {form.getFieldDecorator('outStorageReason')(<Input placeholder='请输入' />)}
            </Form.Item>
          </Col>
        </Row>
      </Modal>
    </>
  );
};

export default Form.create()(ClaimForm);
